export default {
  computed: {
    nodataStyle () {
      return {
        showNodata: this.showNodata,
        nodataHeight: this.nodataHeight,
        nodataImgWidth: this.nodataImgWidth,
        nodataImgHeight: this.nodataImgHeight,
        nodataIconColor: this.nodataIconColor,
        nodataImg: this.nodataImg,
        nodataText: this.nodataText,
        nodataTextColor: this.nodataTextColor,
        nodataFontSize: this.nodataFontSize
      }
    }
  },

  methods: {
    setNodataStyle () {
      // ::root 表示组件根元素选择器
      const style = `
        ::root .tw-librarynodata {
          display: ${this.showNodata ? 'block' : 'none'};
          height: ${this.nodataHeight};
        }

        ::root .tw-librarynodata-inner {
          min-width: ${this.nodataImgWidth};
          min-height: ${this.nodataImgHeight};
        }

        ::root .tw-librarynodata-inner:after {
          content: "${this.nodataText}";
          color: ${this.nodataTextColor};
          font-size: ${this.nodataFontSize};
        }

        ::root .tw-librarynodata-icon {
          display: block;
          height: ${this.nodataImgHeight};
          line-height: ${this.nodataImgHeight};
          background: ${this.nodataImg && this.nodataImg.length > 0 ? 'url("' + this.$twApp.fileBaseUrl + this.nodataImg[0].localPath + '")' : ''} center center/ ${this.nodataImgWidth} ${this.nodataImgHeight};
        }

        ::root .tw-librarynodata-icon:after {
          display: ${this.nodataImg && this.nodataImg.length > 0 ? 'none' : 'inline-block'};
          font-size: ${this.nodataImgHeight};
          color: ${this.nodataIconColor};
        }
      `

      // ${$twApp.fileBaseUrl}${logo[0].localPath}
      this.addNodataStyle(style)
    },

    addNodataStyle (style) {
      this.$el.classList.add(`x${this._uid}`)

      const id = 'nodata_' + this._uid

      const styleEl = document.getElementById(id) || document.createElement('style')
      styleEl.id = id
      styleEl.innerText = style.replace(/::root/gm, `.x${this._uid}`).replace(/\n/gm, '')

      document.head.appendChild(styleEl)
    }
  },

  mounted () {
    this.setNodataStyle()
  },

  watch: {
    nodataStyle: {
      deep: true,
      handler () {
        this.setNodataStyle()
      }
    }
  }
}
